import { insertComponentCssLink } from "../../util/insert-style.js"

let swipoer_insterval = null;
function swiperCreater(images, config) {
   
    const { showNavButtons, showNavDots, showContent } = config;

    const swiperContainer = $('<div>', { class: 'swiper-container' });
    const slides = images.map(image => {
        const swiperSlide = $('<div>', { class: 'swiper-slide' });
        const imgElement = $('<img>', { src: image.url, css: { width: '100%', height: '400px', objectFit: 'clip' } });
        swiperSlide.append(imgElement);

        if (showContent) {
            const contentElement = $('<div>', { class: 'swiper-content', text: image.content });
            swiperSlide.append(contentElement);
        }

        swiperSlide.css({ position: 'relative', zIndex: 1 });
        return swiperSlide;
    });

    slides.forEach((slide, index) => {
        slide.css('display', index === 0 ? 'block' : 'none'); // 仅第一个 slide 显示为 block
        swiperContainer.append(slide);
    });

    let currentIndex = 0;
    const totalSlides = slides.length;

    function showSlide(index) {
        $('.swiper-slide').each((i, slide) => {
            slide.style.display = (i === index) ? 'block' : 'none'; // 只有当前索引的 slide 为 block
        });
        updateNavDots(); // 更新导航小图标状态
    }

    function nextSlide() {
        
        currentIndex = (currentIndex + 1) % totalSlides;
        showSlide(currentIndex);
    }

    function updateNavDots() {
        $('.swiper-dot').removeClass('active'); // 移除所有小图标的激活状态
        $('.swiper-dot').eq(currentIndex).addClass('active'); // 仅为当前索引的小图标添加激活状态
    }

    showSlide(currentIndex);
    if(swipoer_insterval)clearInterval(swipoer_insterval);
    swipoer_insterval = setInterval(nextSlide, 2000);
    
        
    
    
    // 添加导航按钮
    if (showNavButtons) {
        const prevButton = $('<button>', { class: 'swiper-button-prev', html: '&lt;', css: { opacity: 0.7, transition: 'opacity 0.3s' } });
        const nextButton = $('<button>', { class: 'swiper-button-next', html: '&gt;', css: { opacity: 0.7, transition: 'opacity 0.3s' } });
        // 确保按钮已添加到 DOM 中
        swiperContainer.append(prevButton, nextButton);

        $(document).ready(() => {


            // 直接在按钮上绑定点击事件
            $('.swiper-button-prev').on('click', () => {
                currentIndex = (currentIndex - 1 + totalSlides) % totalSlides; // 循环到最后一张
                showSlide(currentIndex);
            });

            $('.swiper-button-next').on('click', () => {
                currentIndex = (currentIndex + 1) % totalSlides; // 循环到第一张
                showSlide(currentIndex);
            });
        });

        // 添加按钮悬停效果
        prevButton.hover(
            function () { $(this).css('opacity', 1); },
            function () { $(this).css('opacity', 0.7); }
        );

        nextButton.hover(
            function () { $(this).css('opacity', 1); },
            function () { $(this).css('opacity', 0.7); }
        );
    }

    // 添加导航小图标
    if (showNavDots) {
        const navDots = $('<div>', { class: 'swiper-nav-dots' });
        images.forEach((_, index) => {
            const dot = $('<span>', { class: 'swiper-dot' });
            $(document).ready(() => {
                $('.swiper-dot').on('click', () => {
                    currentIndex = index; // 更新当前索引
                    showSlide(currentIndex); // 显示对应的幻灯片
                });
            })
            navDots.append(dot);
        });
        swiperContainer.append(navDots);
    }

    insertComponentCssLink("swiper");
    return swiperContainer[0]; // 返回原生 DOM 元素
}

export {
    swiperCreater
}